<template>
  <div id="test">
    <!-- <canvas id="time_line"
            width="800"
            height="27"></canvas>
    <el-button @click="clear">stop</el-button> -->

    <!-- <div id="keyContent"
         class="keyContent1"
         v-for="(item,index) of videoAnalysis.key"
         :key="index"
         @click="changeKey(index)">
      {{item.value}}
    </div> -->

    <div class="progressbar">
      <!-- <div v-for="(item,_index) of videoAnalysis.key"
           :key="_index"> -->
      <div class="keyItemBox"
           v-for="(item, __index) of timeArray"
           :key="__index"
           :style="getStyle(item)"
           @click="changeVideoTime(item)">
      </div>
      <!-- </div> -->
    </div>
  </div>
</template>

<script>
export default {
  name: 'pathwaytrack',
  data() {
    return {

    }
  },
  data() {
    return {
      screenWidth: 800,
      timer: null,

      videoAnalysis: {
        //关键词
        key: [
          {
            value: "学习",
            time: [
              '00:00:01',
              '00:05:52',
              '00:01:12',
              '00:02:32',
              '00:00:11',
              '00:05:22',
              '00:01:32',
              '00:02:12',
              '00:00:01',
              '00:05:53',
              '00:01:13',
              '00:02:34',
              '00:00:15',
              '00:05:26',
              '00:01:37',
              '00:02:18',
              '00:00:09',
              '00:05:54',
              '00:01:55',
              '00:02:22',
              '00:00:11',
              '00:05:32',
              '00:01:42',
              '00:02:32',
              '00:00:01',
              '00:05:55',
              '00:01:15',
              '00:02:35',
              '00:00:15',
              '00:05:22',
              '00:01:35',
              '00:02:15',
            ]
          },
          {
            value: "2018",
            time: [
              '00:02:02',
              '00:03:52',
              '00:07:12',
              '00:04:52',
              '00:04:12',
              '00:06:32',
              '00:01:32'
            ]
          },
          //...
        ],
      },
      keyStatus: [],
      keyX: [], // 关键词时间坐标
      videoTotalTime: '00:10:00' // 视频总时长
    }
  },
  mounted() {
    let that = this
    // that.carveTimeScale(1200, 1, 10, 0, 10)
    let canvasColor = '#999999'
    let initTime = 0
    // this.timer = setInterval(() => {
    //   initTime += 1000
    //   that.carveTimeScale(1200, 1, 10, initTime, 10)
    // }, 1000);
    // for (let i = 0; i < 100; i++) {
    //   initTime += 10
    //   that.carveTimeScale(800, 1, 2, initTime, 60)
    // }
  },
  /* beforeMount() {
    //计算视频总时长
    var videoTotalTime = this.videoTotalTime.split(":");
    var videototaltime = 3600 * parseInt(videoTotalTime[0]) + 60 * parseInt(videoTotalTime[1]) + parseInt(videoTotalTime[2]);

    var key = this.videoAnalysis.key
    //var obj = { status: false }
    for (var i = 0; i < key.length; i++) {

      this.keyStatus.push({ status: false }) //给每一个关键词初始化为false
      //console.log(this.keyStatus)

      var width = 400 //视频进度条像素宽度
      var time = key[i].time
      var array = []
      for (var j = 0; j < time.length; j++) {
        var keyTime = time[j].split(":");
        var keytime = 3600 * parseInt(keyTime[0]) + 60 * parseInt(keyTime[1]) + parseInt(keyTime[2]);
        var bi = keytime / videototaltime //时间占总时间的比例
        var x = bi * width //位置
        array.push(x.toFixed(2)) //保留两位小数
        this.keyX[i] = array //二维数组
      }
    }
    this.keyStatus[0].status = true //默认显示第一个关键词的时间轴
  }, */
  computed: {
    timeArray() {
      const a = new Array(100).fill(null)
      return a.map(() => {
        return Math.round(Math.random() * 10000) / 10000
      }).sort()
    }
  },
  methods: {
    changeKey(index) {
      for (var i = 0; i < this.keyStatus.length; i++) {
        this.keyStatus[i].status = false
      }
      this.keyStatus[index].status = true
      //console.log(this.keyStatus)
    },
    getStyle(_index, __index) {
      // var value = this.keyX[_index][__index]
      //console.log(value)
      // return 'transform: translateX(' + value + 'px)';
      //利用translateX实现X坐标的移动

      return 'transform: translateX(' + (_index * 800 - 400) + 'px)';
    },

    //改变视频播放
    changeVideoTime(time) {
      var timeSecond = time.split(":");
      var totalTime = 3600 * parseInt(timeSecond[0]) + 60 * parseInt(timeSecond[1]) + parseInt(timeSecond[2]);
      var thisVideo = document.getElementById("video");
      thisVideo.currentTime = totalTime;
    },
    clear() {
      clearInterval(this.timer)
    },
    /**
     * 分割像素刻度
     * width: 宽度 
     * ms：一个小刻度的毫秒数 
     * pxMs：10像素一个小刻度 
     * pageShowStartTime：初始时间（毫秒） 一大段间隔时长(秒）
     */
    carveTimeScale(width, ms, pxMs, pageShowStartTime, intervalTime) {
      let canvasId = document.getElementById('time_line')
      let ctx = canvasId.getContext('2d')
      ctx.clearRect(0, 0, 1200, 60)
      ctx.fillStyle = '#999999'
      // 为防止苹果屏幕2X显示不正常
      // 为防止苹果屏幕2X显示不正常
      var getPixelRatio = function (context) {
        var backingStore = context.backingStorePixelRatio ||
          context.webkitBackingStorePixelRatio ||
          context.mozBackingStorePixelRatio ||
          context.msBackingStorePixelRatio ||
          context.oBackingStorePixelRatio ||
          context.backingStorePixelRatio || 1
        return (window.devicePixelRatio || 1) / backingStore
      }
      let ratio = getPixelRatio(ctx)
      let msOffset = this.startOffsetTime(pageShowStartTime, ms) // 开始的偏移时间 ms
      let pxOffset = msOffset / 1000 * pxMs // 开始的偏移距离 px
      let leftDistance = 0 // 到左侧的距离
      let leftDistanceTime = 0 // 到左侧的时间
      let beginX = 0
      let beginY = 0
      for (let i = 0; i < width / (ms * pxMs); i++) {
        leftDistance = pxOffset + i * (ms * pxMs) // 距离 = 开始的偏移距离 + 格数 * px/格
        leftDistanceTime = pageShowStartTime + msOffset + i * ms // 时间 = 左侧开始时间 + 偏移时间 + 格数 * ms
        beginX = pxOffset + i * (ms * pxMs)
        let canvasColor
        let showTime = pageShowStartTime + beginX / pxMs * 1000
        if (showTime % (intervalTime * 1000) === 0) {
          beginY = 0
          ctx.font = '12px Arial'
          ctx.fillText(this.changeTime(showTime, 1), beginX + 10, 22)
          canvasColor = '#999999'
          ctx.fillStyle = '#B1B1B1'
          this.drawLine(leftDistance, beginY, leftDistance, 20, canvasColor, 1)
        } else if (showTime % intervalTime == 0) {
          beginY = 0
          canvasColor = '#999999'
          this.drawLine(leftDistance, beginY, leftDistance, 10, canvasColor, 1)
        }
      }
    },
    /**
     * 根据传入参数画线
     */
    drawLine(beginX, beginY, endX, endY, color, width) {
      let canvasId = document.getElementById('time_line');
      let ctx = canvasId.getContext('2d');
      ctx.beginPath();
      ctx.moveTo(beginX, beginY);
      ctx.lineTo(endX, endY);
      ctx.strokeStyle = color;
      ctx.lineWidth = width;
      ctx.stroke();
    },
    /**
     * 左侧开始时间的偏移，返回单位ms
     */
    startOffsetTime(timestamp, step) {
      let remainder = timestamp % step
      return remainder ? step - remainder : 0
    },
    /**
     * 返回时间
     */
    changeTime(time, num) {
      let hour = 0
      let minute = 0
      let second = 0
      second = time / 1000
      if (second >= 3600) {
        minute = (second - (second % 60)) / 60
        hour = parseInt((minute / 60).toString())
        minute = minute % 60
        /* eslint-disable */
        hour >= 10 ? hour : hour = '0' + hour
        minute >= 10 ? minute : minute = '0' + minute
        second = second % 60
        second >= 10 ? second : second = '0' + second
        /* eslint-enable */
        return hour + ':' + minute + ':' + second
      }
      if (second < 3600 && second >= 60) {
        hour = '00'
        minute = parseInt((second / 60).toString())
        /* eslint-disable */
        minute >= 10 ? minute : minute = '0' + minute
        second = second % 60
        second >= 10 ? second : second = '0' + second
        /* eslint-enable */
        return hour + ':' + minute + ':' + second
      }
      if (second < 60) {
        hour = '00'
        minute = '00'
        second = parseInt(second)
        /* eslint-disable */
        second >= 10 ? second : second = '0' + second
        /* eslint-enable */
        return hour + ':' + minute + ':' + second
      }
    }
  }
}
</script>

<style lang="scss" scoped>
#test {
  text-align: center;
  font-size: 20px;
}
canvas {
  background: black;
  margin-top: 15vh;
}
.keyContent1 {
  font-size: 0.16rem;
  background: #ffffff;
  border-radius: 0.15rem;
  border: 1px solid #334252;
  display: inline-block;
  margin-left: 0.2rem;
  padding: 0 0.25rem;
  height: 30px;
  line-height: 30px;
  cursor: pointer;
}
.progressbar {
  width: 800px;
  height: 20px;
  margin: 0.2rem 0.22rem;
  background: #f1f1f1;
}
.keyItemBox {
  height: 20px;
  width: 0.03rem;
  background: #5bc3bc;
  display: inline-block;
  margin: 0;
  position: absolute;
  cursor: pointer;
}
</style>
